<template>
	<view>
		<view style="width: 100%;background-color: #fff;">
			<view class="search-box">
				<input type="text" placeholder-class="placeholder-style" placeholder="输入关键词搜索" v-model="keyWord" />
				<view class="search-btn" @click="search">
					<image src="/static/images/search.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<uv-sticky bgColor="#fff">
			<uv-tabs :list="list" keyName="name" lineColor="#FE3052" :inactiveStyle="{'font-size':'32rpx'}" :activeStyle="{color:'#222222','font-size':'32rpx'}"
				@click="tabChange"></uv-tabs>
		</uv-sticky>
		<!-- 瀑布流布局 -->
		<hr-pull-load class="scroll-view" @refresh='refresh' @loadMore='loadMore' :height='scrollHeight'
			:pullHeight='pullHeight' :maxHeight='50' :lowerThreshold='20' :bottomTips='bottomTips' :isAllowPull="true"
			:isTab='false' ref='hrPullLoadRef'>
			<!-- 插入自己的数据-->
			<view style="padding: 30rpx;" class="bottom_bar">
				<FriendList :list="friendList" type="usermark"></FriendList>
			</view>
			<KongList title="列表为空" style="margin-top: 100rpx;" v-if="friendList.length==0"></KongList>
		</hr-pull-load> 
	</view>
</template>

<script setup>
	import {	onReady,	onLoad,	onReachBottom} from '@dcloudio/uni-app'
	import {ref,nextTick} from 'vue'
	import hrPullLoad from '@/components/hr-pull-load/hr-pull-load.vue';
	import KongList from '@/components/KongList.vue'
	import {useUserStore} from "@/store/modules/user.js"
	import {useActiveStore} from "@/store/modules/active.js"
	import FriendList from '@/components/FriendList.vue';
	const userStore = useUserStore()
	const activeStore = useActiveStore()
	const list = ref([])
	const typeId = ref(0)
	const keyWord = ref('')
	const page = ref(1)
	const loadStatus = ref('loadmore')
	const friendList = ref([])
	const scrollHeight = ref(0)
	const pullHeight = ref(20)
	const hrPullLoadRef = ref()
	onLoad(() => {
		tabList()
		getFriendList()
	})
	onReady(() => {
		nextTick(() => {
			uni.getSystemInfo({
				success: (res) => {
					const query = uni.createSelectorQuery().select('.scroll-view')
						.boundingClientRect()
					query.exec((result) => {
						if (result && result.length) {
							scrollHeight.value = res.windowHeight - result[0].top +
								'px'
						}
					})
				}
			})
		})
	})
	// onReachBottom(() => {
	// 	if (loadStatus.value == 'nomore') {
	// 		return
	// 	}
	// 	page.value++
	// 	getFriendList()
	// })
	// 获取tab
	const tabList = async () => {
		let res = await userStore.getConFig({
			type: 'userTaskTeamType'
		})
		if (res.code == 200) {
			list.value = res.data.content
			list.value.unshift({
				id: 0,
				name: '全部'
			})
		}
	}
	// 切换tab
	const tabChange = (e) => {
		typeId.value = e.id
		page.value = 1
		friendList.value = []
		getFriendList()
	}
	const refresh = () => {
		page.value = 1
		friendList.value = []
		getFriendList()
		setTimeout(() => {
			hrPullLoadRef.value.reSet();
		}, 300);
	}
	const loadMore = () => {
		if (loadStatus.value == 'nomore') {
			return uni.$uv.toast('没有更多了~')
		}
		page.value++
		getFriendList()
	}
	// 获取找伴列表
	const getFriendList = async () => {
		let params = {
			lat: uni.getStorageSync('latitude'),
			lng: uni.getStorageSync('longitude'),
			search_text: keyWord.value,
			type: typeId.value,
			page: page.value,
			city_id: uni.getStorageSync('cityId')
		}
		loadStatus.value = 'loading'
		let res = await activeStore.getHomeTaskList(params)
		if (res.code == 200) {
			if (res.data.current_page >= res.data.last_page) {
				loadStatus.value = 'nomore'
			} else {
				loadStatus.value = 'loadmore'
			}
			if (page.value == 1) {
				friendList.value = res.data.data
			} else {
				friendList.value = friendList.value.concat(res.data.data)
			}
		} else {
			loadStatus.value = 'nomore'
		}
	}
	// 搜索
	const search = () => {
		page.value = 1
		friendList.value = []
		getFriendList()
	}
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
	.search-box {
		display: flex;
		align-items: center;
		border: 4rpx solid #222;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		padding: 8rpx;
		// margin-top: 30rpx;
		width: 690rpx;
		margin: auto;

		input {
			width: 594rpx;
			margin-left: 36rpx;
			color: #999;
			font-size: 28rpx;
		}

		.search-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 96rpx;
			height: 64rpx;
			background: #222222;
			border-radius: 32rpx 32rpx 32rpx 32rpx;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.placeholder-style {
		color: #999;
		font-size: 28rpx;
	}

	// 列表
	.item {
		.flow-img {
			position: relative;

			.push-time {
				position: absolute;
				bottom: 16rpx;
				right: 12rpx;
				text-align: center;
				width: 156rpx;
				height: 40rpx;
				line-height: 40rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #FFFFFF;
				background: #000000;
				border-radius: 22rpx 22rpx 22rpx 22rpx;
				background-color: rgb(46, 49, 35, 0.6);
			}
		}

		.info {
			padding: 0 10rpx;

			.task-type {
				padding: 5rpx 10rpx;
				background: #E8F1FF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #2072FF;
			}

			.task-title {
				margin-left: 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				word-break: break-all
			}
		}

		.task-address {
			display: flex;
			align-items: center;
			margin: 12rpx 0 30rpx 0;
			padding: 0 10rpx;

			image {
				width: 22rpx;
				height: 22rpx;
			}

			.distance {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				padding-left: 8rpx;

			}
		}
	}
	.bottom_bar {
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
	}
	
</style>